<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>5.Vue实例生命周期函数</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">{{message}}</div>
    <script>
        // 通过new加Vue这个修饰符创建出来的
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'hello'
            },
            beforeCreate() {
                console.log('beforeCreate el', this.$el);  //undefined
                console.log('beforeCreate data', this.$data);  //undefined
            },
            created() {
                console.log('created el', this.$el); //undefined
                console.log('created data', this.$data);  //{__ob__: Observer}
            },
            beforeMount() {
                // 页面还没有被完全渲染
                console.log('beforeMount el', this.$el);//{{message}}
                console.log('beforeMount data', this.$data); //{__ob__: Observer}
            },
            mounted() {
                // 页面被渲染完毕
                console.log('mounted el', this.$el); //hello
                console.log('mounted data', this.$data); //{__ob__: Observer}
            },
            beforeDestroy() {
                //vm.$destroy()
                //beforeDestroy
                //destroyed
                // 组件即将被销毁时执行
                console.log('beforeDestroy');
            },
            destroyed() {
                // 当组件被完全销毁之后执行
                console.log('destroyed');
            },
            beforeUpdate() {
                // vm.$data.message='2'
                // beforeUpdate
                // updated
                // "2"
                // 数据发生改变，还没有重新渲染之前执行
                console.log('beforeUpdate');
            },
            updated() {
                // 重新渲染之后
                console.log('updated');
            },
        })

    </script>
</body>

</html>